body,
html {
  background-color: var(--mdc-theme-background);
}

/* Stretch the canvas parent to always be 100% view height and width */
.knapsack-wrapper.knapsack-pattern-direct-parent {
  min-width: 100vw;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  display: flex;
}

/* Elements that depend on a parent to have a width and height */
.knapsack-wrapper.knapsack-pattern-direct-parent:has(
    > cv-action-ribbon,
    > cv-top-app-bar,
    > cv-toolbar,
    > cv-alert
  ) {
  display: block;
}

/* Elements that depend on a parent to have a width */
/* Partial width */
.knapsack-wrapper.knapsack-pattern-direct-parent:has(
    > cv-alert,
    > cv-linear-progress,
    > cv-notebook-cell,
    > cv-slider,
    > cv-slider-range
  ) {
  min-width: 80vw;
}

/* Full-width */
.knapsack-wrapper.knapsack-pattern-direct-parent:has(> cv-alert[inline]) {
  min-width: 100vw;
}

cv-app-shell {
  display: block;
  margin: -8px;
  height: 100vh;
  width: 100vw;
}
